/<template>
  <div class="nearbyRetaurnt">
    <div class="nearbyRetaurnt_eat">附近餐厅</div>
    <div class="nearbyRetaurnt_top">
      <div
        v-for="(item, index) in filterdate"
        :key="index"
        @click="tapIndex(index)"
      >
        <span class="one"> {{ item }}</span
        ><span class="two"> ▼ </span>
      </div>
    </div>

    <div class="nearbyRetaurnt_Isshow" v-show="isshow">
      <!-- 附近 -->
      <div v-if="unindex == 0" class="nearbyRetaurnt_Isshow1">
        <div class="nearbyRetaurnt_Isshow1_1">
          <ul
            class="nearbyRetaurnt_left_1"
            v-for="(item, index) in data.areas"
            :key="index"
          >
            <div @click="onRightList(item.id,index)" :class="index===IndexActive?'active':''">{{ item.name }}</div>
          </ul>
        </div>
        <div class="nearbyRetaurnt_left_2">
          <div
            class="nearbyRetaurnt_left_22"
            v-for="(item, index) in newdata"
            :key="index"
          >
            <div>{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 全部菜系 -->
      <div v-if="unindex == 1">
        <ul
          class="nearbyRetaurnt_left"
          v-for="(item, index) in data.style"
          :key="index"
        >
          <li>{{ item.name }}</li>
        </ul>
      </div>
      <!-- 只能排序 -->
      <div v-if="unindex == 2">
        <ul
          class="nearbyRetaurnt_left"
          v-for="(item, index) in data.orders"
          :key="index"
        >
          <li>{{ item.name }}</li>
        </ul>
      </div>
      <!-- 筛选 -->
      <div v-if="unindex == 3"></div>
    </div>
  </div>
</template>

<script>
import { getFiltercontent } from "../server/index";
export default {
  data() {
    return {
      data: {},
      filterdate: ["附近餐厅", "全部菜系", "智能排序", "筛选"],
      unindex: 0,
      isshow: false,
      newdata: ["附近的餐厅"],
      IndexActive:0
    };
  },
  onLoad() {
    //   轮播图的生命周期
  },
  created() {
    // 附近餐厅的数据
    getFiltercontent({
      cityId: 19,
      mwAuthToken:
        "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      fromw: 1401,
    }).then((ok) => {
      this.data = ok.data;
    });
  },
  methods: {
    tapIndex(index) {
      this.unindex = index;
      this.isshow = !this.isshow;
    },
    onRightList(id,index) {
      let newDate = this.data.areas.filter((item) => item.id === id)[0].bc;
      this.IndexActive=index
      this.newdata = newDate;
    },
  },
};
</script>

<style scoped lang="scss">
ul {
  list-style: none;
}
.nearbyRetaurnt {
  width: 100%;
  margin: 10rpx auto;
}
.nearbyRetaurnt_top {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 80rpx;
  .one {
    font-size: 14px;
  }
  .two {
    font-size: 12px;
    color: #777;
  }
  > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1;
    justify-content: space-around;
    text-align: center;
    margin-left: 1rpx;
  }
  > div:nth-child(4) {
    justify-content: space-evenly;
  }
}

.nearbyRetaurnt_Isshow {
  width: 100%;
  background-color: rgb(243, 234, 234);
  height: 400rpx;
  overflow: hidden;
  .nearbyRetaurnt_Isshow1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    .nearbyRetaurnt_Isshow1_1 {
      width: 45%;
      height: 100%;
      overflow-y: scroll;
    }
    .nearbyRetaurnt_left_1 {
      width: 100%;
      > div {
        height: 80rpx;
        line-height: 80rpx;
      }
      > div.active {
       color: red;
      }
    }
    .nearbyRetaurnt_left_2 {
      width: 55%;
      height: 100%;
      overflow-y: scroll;
      .nearbyRetaurnt_left_22 {
        width: 100%;
        > div {
          height: 80rpx;
          line-height: 80rpx;
        }
        > div.active {
            color: red;
        }
      }
    }
  }
}
</style>